import React,{Component} from 'react';
import { withRouter} from 'react-router-dom'
import { Dropdown,Menu,Icon } from 'antd';
import HeaderToggle from '../header/header-toggle';
import ResetPass from './resetpass';

//example
import Pass from '../z-example/state/pass';

//子组件
class List extends Component {
    activeName = ()=> {
        let s = this.props.activeStyle == this.props.boxVal ? 'active-tab' : '';
        return s;
    };
    selectTab = () =>{
        this.props.selectTab(this.props.activeStyle)
    };
    render() {
        return (
            <li className={'tab-list ' + this.activeName()} onClick={this.selectTab}>{this.props.children}</li>
        );
    }
}

//父组件
class Nav extends Component {
    state={
        tabVal:'a',
    };
    selectTab(val){
        this.setState({
            tabVal: val,
        });
    };

    /*登出和密码重置*/
    logOut(){
        localStorage.removeItem('user');
        this.props.history.replace('/login');
    }
    render() {
        const menu = (
            <Menu>
                <Menu.Item disabled><Icon type="user" /> 个人中心</Menu.Item>
                <Menu.Item key="reset">
                    <Icon type="setting" />
                    <ResetPass> 密码重置</ResetPass>
                </Menu.Item>
                <Menu.Divider />
                <Menu.Item key="logout" onClick={this.logOut.bind(this)}><Icon type="logout" /> 退出登录</Menu.Item>
            </Menu>
        );

        return (
            <div className="main-nav">
                <div className="nav">
                    <HeaderToggle />
                    <ul className="nav-tab">
                        <List boxVal={this.state.tabVal} activeStyle="a" selectTab={this.selectTab.bind(this)}>选项一</List>
                        <List boxVal={this.state.tabVal} activeStyle="b" selectTab={this.selectTab.bind(this)}>选项二</List>
                        <List boxVal={this.state.tabVal} activeStyle="c" selectTab={this.selectTab.bind(this)}>选项三</List>
                        <List boxVal={this.state.tabVal} activeStyle="d" selectTab={this.selectTab.bind(this)}>选项四</List>
                    </ul>
                    <Pass />
                    <Dropdown overlay={menu}>
                        <a className="user-box" href="javascript:;">
                            User center <Icon type="down" />
                        </a>
                    </Dropdown>
                </div>
            </div>
        );
    }
}

export default withRouter(Nav);